<template>
  <section class="content">
    <p></p>
    <div class="bg-myorange box-body margin-bottom" style="display: none;">
      <p >
        <em style="font-weight: bold;">温馨提示</em>：在店铺授权之前，请完善基本信息配置，如
        <span class="linkColor">
        <router-link to="/role/getUserRole">
          组织权限配置、
        </router-link>
        <router-link to="/v1/warehouse/getWareHouseList">仓库管理、</router-link>
        <router-link to="/v1/goods/getList">基础商品管理</router-link>
        </span>
      </p>
    </div>

    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">店铺管理</h3>
        <!--<button type="button" v-if="$_has('sys:shop:add')" class="btn btn-info pull-right m-r-10" data-toggle="modal" data-target="#modal-default"><i class="fa fa-plus"></i>添加店铺</button>-->
      </div>
      <form class="form-horizontal">
        <div class="box-body mybody">
          <div class="form-group">
            <div data-toggle="modal"
                 class="col-sm-4" v-for="(platForm,index) in platFormList" :key="index" style="margin-bottom: 10px">
              <div class="img-pos">
                <img :src="platForm.image" alt="">
                <div class="pos">
                  <p>
                  {{platForm.platformName}}店铺
                  </p>
                  <p class="empower"  @click="addStore(platForm.id)">授权</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /.box-body -->

        <!-- /.box-footer -->
      </form>
    </div>

    <ebay-store mode="add" v-if="ptId != ''" :ptId="ptId" :storeId="storeId" @commit="handleCommit"></ebay-store>
  </section>
</template>

<script>
  import baseURL from '@/js/common/baseURL'
  import instance from '@/api/index.js'
  import EbayStore from '@/pages/store/ebayStore'

  export default {
    name: "theStoreList",
    props: ["storeId"],
    components: {
      EbayStore
    },
    data() {
      return {
        ptId: '', //选中平台id
        platFormList: [], //页面显示list
        platFormSelectList: [], //添加店铺列表下拉平台
        show: false,
      }
    },
    methods: {
      alertMessage: function (value) {
        if (value) {
          this.$message({
            showClose: false,
            message: '操作成功!',
            type: 'success'
          });
        } else {
          this.$message({
            showClose: false,
            message: '操作失败!',
            type: 'error'
          });
        }
      },
      getPlatFormList: function () { //获取平台列表或者下拉框
        let vm = this;
        instance({
          method: 'post',
          url: '/v1/author/getPlatFrom',
        }).then(function (data) {
          vm.platFormList = data.data.data;
          vm.platFormSelectList = data.data.data;
          vm.show = false;//loading加载
        })
      },
      addStore: function(ptId) {
        let self = this;
        this.ptId = ptId;
        let mapping = {
          "1": "ebayStoreDialog",
          "2": "ebayStoreDialog",
          "3": "ebayStoreDialog",
          "4": "ebayStoreDialog"
        };
        this.$nextTick(function() {
          $("#" + mapping[ptId]).modal('show').on('hidden.modal.bs', function() {
            self.ptId = "";
          });
        });
      },

      handleCommit() {
        this.$emit('commit');
      }
    },
    created() {
      this.getPlatFormList();
    }
  }
</script>

<style scoped lang="less">
.modal {
  z-index: 9999;
}


  .text-red {
    color: #FF5655!important;
}
.bg-myorange{
  background: #FDF6EC;
  color: #E6A23C;
}
.linkColor a{
  color: #409EFF;
}
.control-label{
  position: relative;
}
.sup{
      margin-right: 3px;
      color: #FF5655;
}

      
.box{
    border-top: none;
    box-shadow:none;
    border-radius: 4px;
    border: 1px solid #E4E7ED;
    padding: 0 10px;
       &::before{
            content: "";
            display: inline;
            height: 30px;
            width: 2px;
            background-color: #409EFF;
            position: absolute;
            left: 0;
            top: 10px;
        }
}
.box-header{
   padding:10px 0;
   margin: 0 10px;
   border-bottom: 1px solid #E4E7ED;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.hover{
      background: #409EFF;
    }
.mybody{
      margin-top: 10px;
      padding: 20px 10px;

}
.img-pos{
  background:none;
  height: 150px;
  border:1px solid #E4E7ED;
  img{
    height: 60%;
    margin: 10px 0;
  }
  .pos{
    position: inherit;
    background: none;
    color: #333333;
    left: 26px;
    right: 0;
    bottom: 10px;
    width:auto;
    height: auto;
    display: flex;
    flex-direction: row;
    p{
      width: 40%;
      text-decoration: none;
      text-align: left;
      cursor:default;
      &.empower{
         width: 44%;
          text-align: right;
          color: #409EFF;
          cursor: pointer;
      }
    }
  }
}
</style>
